<template>
  <div class="dt-main-tabs">
    <!-- <span class="dt-tabs-home"><i class="el-icon-s-home" @click="goHome"></i></span> -->
    <div class="dt-tabs-list" v-if="tabs.length">
      <ul>
        <li v-for="item in tabs" :key="item.hashName" @click="focusTab(item.hashName)" :class="{on:item.hashName===hashName}">
          <span :title="getTabTitle(item,false)">{{getTabTitle(item,true)}}<i class="el-icon-close" @click.stop="closeTab(item.hashName)"></i></span>
          <em>|</em>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      secret_uid: this.$store.state.uid
    }
  },
  computed: {
    tabs() {
      return this.$tools.getTabs(this, this.secret_uid)
    },
    hashName() {
      return this.$tools.getHashName(this)
    },
    elTab() {
      return this.$tools.getQuery(this).elTab
    }
  },
  methods: {
    getTabTitle(item, isOmit) {
      var projectName = this.$store.state.projectName ? JSON.parse(this.$store.state.projectName) : {}
      if (item.text) {
        return item.text
      } else {
        if (projectName[item.rootProjectId]) {
          return isOmit //是否省略
            ? projectName[item.rootProjectId].length > 7
              ? projectName[item.rootProjectId].substring(0, 7) + '...'
              : projectName[item.rootProjectId]
            : projectName[item.rootProjectId]
        } else {
          return ''
        }
      }
    },
    // goHome() {
    //   this.$router.push('/main/#/pm?tab=list&elTab=0')
    //   //强制调用
    //   this.$tools.setTabs(this, this.secret_uid, 'open', { hashName: 'pm-list', fullPath: '/main/#/pm?tab=list', elTab: '0' })
    // },
    focusTab(hashName) {
      var isExistItem = this.tabs.filter((item) => {
        return item.hashName === hashName
      })[0]
      this.$router.push(isExistItem.fullPath)
    },
    closeTab(hashName) {
      var isExistItem = this.tabs.filter((item) => {
          return item.hashName === hashName
        })[0],
        index = this.tabs.indexOf(isExistItem)

      if (hashName === this.hashName) {
        if (this.tabs[index + 1]) {
          this.$router.push(this.tabs[index + 1].fullPath)
        } else if (this.tabs[index - 1]) {
          this.$router.push(this.tabs[index - 1].fullPath)
        }
      }
      //强制调用
      this.$tools.setTabs(this, this.secret_uid, 'close', { hashName: hashName })
    }
  }
}
</script>
<style scoped>
.dt-main-tabs {
  height: 28px;
  padding-top: 6px;
  display: flex;
  background-color: #f2f3f5;
}
.dt-tabs-home {
  width: 144px;
}
.dt-tabs-home i {
  color: #5976ef;
  font-size: 25px;
  cursor: pointer;
}
.dt-tabs-list {
  line-height: 28px;
  overflow: auto;
}
.dt-tabs-list ul {
  display: flex;
  overflow: auto;
}
.dt-tabs-list ul li {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  margin-left: 2px;
}
.dt-tabs-list ul li span {
  width: 124px;
  padding: 0 8px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.dt-tabs-list ul li:hover span {
  background-color: #fafafa;
}
.dt-tabs-list ul li.on span {
  background-color: #fff;
}
.dt-tabs-list ul li em {
  font-size: 10px;
  color: #c0c4cc;
  margin-left: 2px;
}
.dt-tabs-list ul li.on span {
  color: #2f54eb;
}
.dt-tabs-list ul li i {
  line-height: 28px;
  color: #909399;
}
</style>